@header_color: #F7F7F7;
@borderColor: #cdcdcd;
@list-text-red: #D62728; // 文字红
@list-items-active-bg: #FF6D6C;
@search-hover-bg: #EDEFF2;
@headerHeight: 48px;
@headerElementPadding: 13px;

// 直播间首页的搜索
.search-container.live {
  .search-bar .search-input {
    line-height: 30px;
  }
}
.search-container {
  position: relative;
  font-size: 1.2rem;
  width: 300px;
  margin: 0 1em;
  // 搜索栏样式
  .search-bar {
    .search-input {
      display: inline-block;
      width: 300px;
      line-height: 22px;
      height: 22px;
      padding: 0 36px;
      border: 1px solid #999;
      border-radius: 20px;
      font-family: Arial, "Microsoft YaHei", "微软雅黑",  "PingFangSC-Regular", Helvetica, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, "Microsoft Sans Serif";
      &:focus {
        border-color: #09F;
      }
      &:focus+i {
        color: #09F;
      }
    }
    i {
      position: absolute;
      left: 18px;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      color: #999;
    }
  }
  // 显示搜索结果框
  .show-search-menu {
    display: block;
  }
  // 隐藏搜索结果框
  .hide-search-menu {
    display: none;
  }
  // 搜索结果显示
  .search-menu {
    position: absolute;
    top: 100%;
    width: 100%;
    min-height: 30px;
    text-align: center;
    overflow: hidden;
    overflow-y: auto;
    background-color: #FFF;
    border: 1px solid #DDD;
    border-radius: 4px;
    z-index: 11;
    &::-webkit-scrollbar {
      width: 4px;
    }
    &::-webkit-scrollbar-track-piece {
      background: #F0F0F0;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #DDD;
      border-radius: 3px;
    }
    &::-webkit-scrollbar-track,
    &::-webkit-scrollbar-track-piece {
      display: none;
    }
    table {
      width: 100%;
    }
    tr {
      line-height: 2rem;
      -ms-text-overflow: ellipsis;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      &.even {
        background-color: @search-hover-bg;
      }
      &.active,
      &:hover {
        cursor: pointer;
        color: #FFF;
        background-color: @list-items-active-bg;
      }
      &.empty-symbol {
        line-height: 3rem;
        font-size: 1.4rem;
        text-align: center;
        td {
          border-bottom: 1px solid #EEE;
        }
      }
      td {
        padding: 4px 23px;
      }
    }
    .search-result-align-left {
      text-align: left;
      max-width: 114px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .search-result-align-right {
      text-align: right;
    }
    .search-short-key {
      color: @list-text-red;
    }
  }
}